<template>
    <h2 @click="$router.push({ name: 'make' })">发表文章</h2>
    <div v-for="article in news" :key="article.id" class="article">
        <router-link :to="{ name: 'show', query: { id: article.id } }">
            {{ article.title }}
            ---
            <router-link :to="{ name: 'edit', query: { id: article.id } }">
                编辑
            </router-link>
        </router-link>
    </div>
</template>

<script setup>
import { computed } from 'vue'
import { useStore } from 'vuex'
const store = useStore()
const news = computed(() => store.state.news.data)
</script>

<style lang="scss" scoped>
.article {
    @apply border mb-3 bg-gray-200  px-3 shadow-md rounded-md;
}
</style>
